<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhaoxiaodong
 * @Date: 2020-09-01 15:17:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-09 14:09:10
-->
<template>
  <div class="tool-list">
    <div class="tool-list-flex">
      <div class="tool-list-col" v-for="(btn, index) in computedBtns" :key="index">
        <div class="item" @click="linkPath(btn.path)">
          <div class="item-logo" :class="btn.iconClass">
            <app-icon class="icon" :iconName="btn.icon" />
          </div>
          <div class="item-text">
            <div class="item-text-title">{{ btn.name }}</div>
            <div class="item-text-content">
              {{ btn.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tool',
  data() {
    return {
      toolBtns: [
        {
          key: 'tool_applications_quick_authentication',
          name: '应用快速认证',
          desc: '支持上传应用包，组件包，聚合包，基础数据包做快速认证。',
          path: '/tool/fastCertification',
          iconClass: 'blue',
          icon: 'vcloud-Rapid-application-certification'
        },
        {
          key: 'tool_packages_download',
          name: '补丁包下载',
          desc: '聚合应用安装前置要求，选择相关应用的补丁包，下载并安装补丁包后，方可安装聚合应用。',
          path: '/tool/patchPack',
          iconClass: 'green',
          icon: 'vcloud-yingyongjieru'
        }
      ]
    };
  },
  computed: {
    computedBtns() {
      return this.toolBtns.filter(btn => this.$checkAuth(btn.key));
    }
  },
  created() { },
  methods: {
    linkPath(url) {
      this.$router.push({
        path: url
      });
    }
  }
};
</script>

<style lang="scss">
.tool-list {
  margin: auto;
  max-width: 1260px;
  padding: 25px 0 30px 0;
  .tool-list-flex {
    margin-left: -20px;
    margin-right: -20px;

    display: flex;
    flex-flow: row wrap;
    .tool-list-col {
      padding-left: 20px;
      padding-right: 20px;
      display: block;
      box-sizing: border-box;
      width: 33.33333333%;
      flex: 0 0 auto;
      float: left;
    }
  }
  .item {
    background: #ffffff;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(51, 108, 251, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 30px 20px;
    &-logo {
      width: 90px;
      height: 90px;
      border-radius: 70px;
      margin-right: 22px;
      text-align: center;
      line-height: 87px;
      font-size: 32px;
      .icon {
        font-size: 36px;
      }
    }
    .blue {
      background: #f6f8fd;
      border: 1px solid #bfd1ff;
      color: #336cfb;
    }
    .green {
      background: #fafff7;
      border: 1px solid #b2cca7;
      color: #4bb81e;
    }
    &-text {
      flex: 1;
      height: 90px;
      &-title {
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 12px;
      }
      &-content {
        font-size: 12px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
  .item:hover,
  .item:active {
    border: 2px solid #336cfb;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.06);
  }
}
</style>
